<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.3.1.min.js"></script>
		<style type="text/css">
			input+span{
				color: red;
				font-size: 18px;
			}
			.valid{
				color: green;
				content: 'ok';
			}
		</style>
		<script>
			$(function(){
				var nameok=false;
				var passok=false;
				var emailok=false;
				var ageok=false;
				var telok=false;
				$("input[name='nickname']").blur(function(){
					var e=$(this).val();
					if(e.length<4||e.length>16){
						//alert("昵称长度必须在1-16之间，您输入的是"+e.length);
						$(this).next().html("昵称长度必须在1-16之间，您输入的是"+e.length).removeClass("valid");
						nameok=false;
						return false;
					}
					//要求不能有数字
					for(var i=0;i<e.length;i++){
						if(e.charAt(i)>='0'&&e.charAt(i)<='9'){
							$(this).next().html("昵称中不能有数字").removeClass("valid");
							nameok=false;
							return false;
						}
					}
					$(this).next().addClass("valid").html("√");
					nameok=true;
					return true;
				});
				$("#pwd").blur(function(){
					var p=$(this).val();
					if(p.length>30||p.length<6){
						$(this).next().removeClass("valid").html("密码长度必须在6-30之间");
						passok=false;
						return false;
					}
					var rp=$("#repass").val();
					console.log(p+","+rp);
					if(p!=rp){
						$(this).next().removeClass("valid").html("两次密码输入不一致！");
						passok=false;
						return false;
					}
					$(this).next().addClass("valid").html("√");
					passok=true;
					return true;
				});
				$("#repass").blur(function(){
					console.log(444);
					$("#pwd").trigger("blur");
				});
				
				$("#tel").blur(function(){
					var e=$(this).val();
					if(e.charAt(0)!='1' ||isNaN(e)||e.length!=11){
						$(this).next().removeClass("valid").html("手机号不合法！");
						telok=false; 
						return false;
					}
					$(this).next().addClass("valid").html("√");
					telok=true;
					return true;
				});
				
				function checkLike(){
					var len=$(":checkbox[name='like']:checked").length;
					 
					if(len<2){
						$(":checkbox[name='like']").last().next().html("必须选中两项！");
						return false;
					}
					$(":checkbox[name='like']").last().next().html("ok");
						
					return true;
				}
				//表单提交
				$("#regForm").submit(function(){
					//模拟触发blur事件
					$(":text,:password,#tel").trigger("blur");
					var like=checkLike();
					var f=nameok&&passok&&telok&&like;
					/*if(!f){
						alert("没有填写完成");
					}*/
					if($("#greement").is(":checked")==false)
					{
						alert("必须同意用户协议");
						return false;
					}
					return f;
				});
			});
			
		</script>
	</head>
	<body>
		<form action="index1.html" method="get" id="regForm">
			<h1>表单验证</h1>
			<p>
				<label>昵称</label><input type="text" name="nickname" /><span></span>
			</p>
			<p>
				输入密码:<input name="pass" type="password" id="pwd" class="inputs" /><span></span>
			</p>
			<p>
				
			再次输入密码:<input type="password" id="repass" name="repass"/>
			</p>
			<p>
				您的Email:<input type="email" name="email" class="inputs" id="email"/><span></span><br />
			
			</p>
			<p>
				<label>手机号</label>
				<input type="tel" name="telephone" id="tel" /><span></span>
			</p>
			<p>
				<label>喜欢什么样的语言（至少选择两种）</label>
				<input type="checkbox" name="like" value="java"/>java
				<input type="checkbox" name="like" value="js"/>js
				<input type="checkbox" name="like" value="python"/>python
				<input type="checkbox" name="like" value="c"/>c
				<input type="checkbox" name="like" value="c#"/>c#
				<input type="checkbox" name="like" value="vb"/>vb
				<input type="checkbox" name="like" value="php"/>php
				<span></span>
			</p>
			<p>
				<label>年龄</label>
				<input type="text" name="age" id="age"/><span></span>
			</p>
			<p>
				请同意<a href="#">用户协议</a><input type="checkbox" name="greement" value="y" id="greement"/>
			</p>
			
			<input type="submit" value="注册" name="btn" class="rbl"/>
		</form>
	</body>
</html>
